import { Link, useNavigate } from "react-router-dom"

const Login = () => {
    // 引进钩子函数
    const navigate = useNavigate()
    return (
        <div>
            我是登录页
            {/* 声明式路由导航跳转写法， 使用内置Link组件，使用场景：菜单里面 */}
            {/* 声明式导航是指通过在模版中通过 `<Link/> ` 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行 */}
            {/* 语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可 */}
            <Link to="/article">跳转到文章页</Link>

            {/* 编程式写法， 使用钩子函数，使用场景：逻辑代码里面 */}
            {/* 编程式导航是指通过 `useNavigate` 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活 */}
            {/* 语法说明：通过调用navigate方法传入地址path实现跳转 */}
            <button onClick={() => navigate('/article1')}>跳转到文章页</button>
            <button onClick={() => navigate('/article1?id=100&name=jack')}>searchParams传参</button>
            {/* 需要在路由那里增加占位符配置 */}
            <button onClick={() => navigate('/article2/100/jack')}>params传参</button>
        </div>
    )
}

export default Login